<html xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">
    <f:view contentType="text/html">
        <h:head>
            <h:outputStylesheet library="css" name="style.css" />
            <!-- Latest compiled and minified CSS -->
            <h:outputStylesheet library="css" name="bootstrap.min.css" />
            <!-- Optional theme -->
            <h:outputStylesheet library="css" name="bootstrap-theme.min.css" />
            <!-- Latest compiled and minified JavaScript -->
            <script src="#{facesContext.externalContext.requestContextPath}/resources/js/bootstrap.min.js"></script>
            <style type="text/css">
                * {
                    margin: 0;
                    padding: 0;
                }
                .ui-widget {
                    font-size: 80%;
                }
                .ui-widget input {
                    font-size: 120%;
                }
            </style>
            <title>
            </title>
            <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
        </h:head>
        <h:body style="background-image: url('resources/img/bg-index.jpg');background-position: 50% 0%;background-repeat: no-repeat">   
            
            <p:dialog id="dialog" visible="true" closable="false" draggable="true" resizable="false" width="450" widgetVar="dlg"
                      header="CnPosto">
                <h:form>
                    <p:growl life="6000" id="growl"/>

                    <p:message for="login" />
                    <p:message for="pwd1" />
                    <p:message for="pwd2" />
                    <p:message for="email" />

                    <center>
                        <br/>
                        <h:panelGrid columns="3" style="font-weight: bold;" width="400px">

                            <p:outputLabel styleClass="margin-top-text" value="Login*"/>
                            <p:inputText id="login" styleClass="margin-top-input" required="true" requiredMessage="Campo usuário obrigatório" maxlength="20" value="#{controllerUsuario.usuario.login}">
                                <f:validator validatorId="validators.ValidatorUsuario"/>
                                <p:ajax update="msgLogin" event="keyup" />
                            </p:inputText>
                            <p:message for="login" id="msgLogin" display="icon"/>


                            <p:outputLabel value="Criar senha*" styleClass="margin-top-text"/>
                            <p:password styleClass="margin-top-input" id="pwd1" required="true" requiredMessage="Campo senha obrigatório" validatorMessage="Senhas não batem" maxlength="18" value="#{controllerUsuario.usuario.senha}"
                                        feedback="true" promptLabel="Entre com a senha" weakLabel="Fraco" goodLabel="Médio" strongLabel="Forte" match="pwd2"/>
                            <!--espaco-->


                            <p:outputLabel value="Confirmar senha*" styleClass="margin-top-text"/>
                            <p:password id="pwd2" required="true" styleClass="margin-top-input" requiredMessage="Campo de confirmação senha obrigatório" maxlength="18" value="#{controllerUsuario.usuario.senha}"/>
                            <!--espaco-->

                            <p:outputLabel value="Nome*" styleClass="margin-top-text"/>
                            <p:inputText id="nome" required="true" styleClass="margin-top-input" requiredMessage="Campo nome obrigatório" maxlength="45" value="#{controllerUsuario.usuario.nome}"/>
                            <p:message for="nome" id="msgNome" display="icon"/>
                            
                            <p:outputLabel value="C.P.F*" styleClass="margin-top-text"/>
                            <p:inputText id="cpf" required="true" styleClass="margin-top-input" requiredMessage="Campo cpf obrigatório" maxlength="11" value="#{controllerUsuario.usuario.cpf}">
                                <f:validator validatorId="validators.ValidatorCpf"/>
                                <p:ajax update="msgCpf" event="keyup" />
                            </p:inputText>
                            <p:message for="cpf" id="msgCpf" display="icon"/>
                            
                            <p:outputLabel value="Nascimento*" styleClass="margin-top-text"/>
                            <p:inputMask id="nascimento" required="true" styleClass="margin-top-input" requiredMessage="Campo data de nascimento obrigatório" mask="99/99/9999" value="#{controllerUsuario.usuario.data_nascimento}"/>
                            <p:message for="nascimento" id="msgNascimento" display="icon"/>

                            <p:outputLabel value="E-mail*" styleClass="margin-top-text"/>
                            <p:inputText id="email" required="true" styleClass="margin-top-input" requiredMessage="Campo e-mail obrigatório" maxlength="65" value="#{controllerUsuario.usuario.email}">
                                <f:validator validatorId="validators.ValidatorEmail"/>
                                <p:ajax update="msgEmail" event="keyup" />
                            </p:inputText>
                            <p:message for="email" id="msgEmail" display="icon"/>

                        </h:panelGrid>
                        <p:watermark for="email" value="ex.: teste@teste.com" />
                        <br/>
                    </center>
                    <div style="margin: 0 0 0 135px">
                        <p:commandButton value="Enviar" actionListener="#{controllerUsuario.salvar()}" update="@form" styleClass="btn btn-default"/>
                        <p:button outcome="index" value="voltar" styleClass="btn btn-default" style="margin-left: 5px;"/>
                    </div>
                    <p:ajaxStatus style="position: relative; float: right; margin: -32px 95px 0 0;">  
                        <f:facet name="start">
                            <h:graphicImage value="resources/img/ajax-loader2.GIF" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>
                </h:form>

            </p:dialog>
        </h:body>
    </f:view>
</html>